<template>
	<el-dialog :visible.sync="options.showDialog" width="600px" class="evalDialog">
		<h3 class="declare-title">{{options.title}}</h3>
		<div class="merchant-name" v-if="options.title == '添加电子营业执照'">
			<span>商户名称：</span><el-input v-model="input" style="width: 260px;" placeholder="请输入内容"></el-input>
		</div>
		<div class="upload-content">
			<el-upload ref="upload" :file-list="fileList" :auto-upload="false"
				action="https://zjsy.fcw-china.com/elecon/electronic/contract/UploadPic"
				list-type="picture-card" :limit="1" :before-upload="beforeAvatarUpload"
				:on-remove="handleRemove" :on-success="success" :on-preview="handlePictureCardPreview">
				<i class="el-icon-plus"></i>
			</el-upload>
		</div>
		<div class="upload-btn">
			<el-button type="primary" size="mini" style="100px;margin-top: 40px;" @click="submitUpload">提交</el-button>
		</div>
		<el-dialog :visible.sync="dialogVisible" width="500px" :modal="false" >
			<img style="width: 80%;margin: 10%;" :src="dialogImageUrl" alt="">
		</el-dialog>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{require: true,type: Object},
	},
	data(){
		return {
			fileList: [],
			dialogVisible: false,
			dialogImageUrl: '',
			input: ''
		}
	},
	methods:{
		/* 手动提交数据 */
		submitUpload() {
			if(this.options.title == '添加电子营业执照' && !this.input){
				this.$message({
					message: '请将信息填写完整！',
					type: 'warning'
				})
				return
			}
			this.$refs.upload.submit();
		},
		/* 手动提交成功返回的数据 */
		success(res, file, fileList){
			console.log(res);
			console.log(file);
			console.log(fileList);
			this.fileList.push({name: file.name,url: res.data,uid: file.uid});
			if(this.options.title == '添加电子营业执照'){
				this.$emit('subUploadData',{
					url: res.data,
					applicantCompany: this.input
				});
			}else{
				this.$emit('subUploadData',res.data);
			}
			
		},
		/* 点击图片放大功能 */
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		/* 删除图片 */
		handleRemove(file, fileList){
			console.log(file);
			console.log(fileList);
			this.fileList = [];
		},
		/* 上传前验证 */
		beforeAvatarUpload(file) {
			console.log(file);
			const isJPEG = file.type === 'image/jpeg';
			const isJPG = file.type === 'image/jpg';
			const isGIF = file.type === 'image/gif';
			const isPNG = file.type === 'image/png';
			const isBMP = file.type === 'image/bmp';
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPEG && !isJPG && !isGIF && !isPNG && !isBMP) {
				this.$message.error('上传图片必须是JPG/JPEG/GIF/PNG/BMP 格式!');
				return false;
			}
		
			if (!isLt2M) {
				this.$message.error('上传大小不能超过 2MB!');
				return false;
			}
			return isLt2M;
		},
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				this.fileList = this.options.fileList;
			}else{
				this.input = '';
			}
		}
	}
}
</script>

<style scoped="scoped">
.declare-title{line-height: 60px;font-size: 18px;letter-spacing: 2px;font-weight: bold;padding: 10px 0 0 0;text-align: center;}
.merchant-name{width:380px;margin: 20px auto;text-align: center;}
.upload-content{width: 150px;height: 150px;margin: 40px auto 0;text-align: center;padding-bottom: 20px;overflow: hidden;}
.upload-btn{text-align: center;padding-bottom: 20px;}
</style>
